<!--
 * @Author: PoJun
 * @Date: 2024-06-20 15:39:41
 * @LastEditors: PoJun
 * @LastEditTime: 2024-06-25 15:20:13
 * @Message: Nothing
-->
<template>
  <view class="theme-page" :style="[vuex_theme]">
    <uv-alert
      type="info"
      description="点击任意颜色, 即可重新配置主题色。主题色主要影响全局的主要按钮、组件展示、主要颜色等。"
      :customStyle="{ marginBottom: '20rpx' }"
    ></uv-alert>
    <view class="theme-page-content">
      <view
        class="theme-page-content-item"
        v-for="(item, index) in getRenderList"
        :key="index"
        :style="[getBackGround(item.hex)]"
        @tap="openColor"
      >
        <view>{{ item.name }}</view>
        <view>{{ item.hex }}</view>
      </view>
    </view>

    <uv-button
      text="恢复默认"
      :plain="true"
      size="large"
      type="info"
      @click="backDefaultColor"
    ></uv-button>

    <uv-pick-color ref="pickerColor" @confirm="confirm"></uv-pick-color>
  </view>
</template>

<script>
import { handleThemeStyle } from "@/utils/theme"
export default {
  data() {
    return {
      defaultList: [
        { name: "Primary", key: "--theme-primary-color", hex: "" },
        { name: "Dark", key: "--theme-primary-dark-color", hex: "" },
        { name: "Disabled", key: "--theme-primary-disabled-color", hex: "" },
        { name: "Light", key: "--theme-primary-light-color", hex: "" }
      ]
    }
  },
  computed: {
    getRenderList() {
      if (!this.vuex_theme) {
        return
      }
      let list = []
      // 为了防止莫名奇妙产生的对象未按照顺序遍历, 所以在这里直接处理掉颜色
      list = this.defaultList.map(item => {
        item.hex = this.vuex_theme[item.key]
        return item
      })
      return list
    }
  },
  methods: {
    openColor() {
      this.$refs.pickerColor.open()
    },
    confirm({ hex }) {
      handleThemeStyle(hex, this)
    },
    getBackGround(color) {
      return { backgroundColor: color }
    },
    backDefaultColor() {
      uni.showModal({
        title: "提示",
        content: "请确认是否恢复默认主题色",
        success: res => {
          if (res.confirm) {
            handleThemeStyle("#3c9cff", this)
          } else if (res.cancel) {
            console.log("用户点击取消")
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.theme-page {
  padding: 25rpx;
  &-content {
    overflow: hidden;
    &-item {
      font-size: 28rpx;
      padding: 25rpx;
      border-radius: 6px;
      color: #fff;
      margin-bottom: 20rpx;
    }
  }
}
</style>
